import { Button, DatePicker, Input, NavBar, Toast } from "antd-mobile";
import { useState } from "react";
import Icon from "@/components/Icon";
import "./index.scss";
import classNames from "classnames";

import { billListData } from "@/Enum/zh";
import { useNavigate } from "react-router-dom";
import { createBill } from "@/store/modules/billStore";
import { useDispatch } from "react-redux";
import { v4 as uuidV4 } from "uuid";
import dayjs from "dayjs";
const New = () => {
  let dispatch = useDispatch();
  let [visible, setVisible] = useState(false);
  const navigate = useNavigate();
  let [form, setKeepForm] = useState({
    money: "",
    useFor: "",
    type: "pay",
    id: "",
    date: new Date(),
  });
  const close = () => {
    setVisible(false);
  };
  let setData = (key, data) => {
    setKeepForm({
      ...form,
      [key]: data,
    });
  };
  const save = () => {
    if (form.useFor == '') {
      
      Toast.show({
        icon: "fail",
        content: "请选择消费类型",
      });
      return
    }
    try {
      dispatch(
        createBill({
          ...form,
          id: uuidV4(),
          money: form.money
            ? form.type === "pay"
              ? Number(form.money)
              : -Number(form.money)
            : 0,
        })
      );
      navigate(-1);
    } catch (e) {
      console.log(e);
    }
  };
  return (
    <div className="keepAccounts">
      <NavBar className="nav" onBack={() => navigate(-1)}>
        记一笔
      </NavBar>

      <div className="header">
        <div className="kaType">
          <Button
            shape="rounded"
            onClick={() => {
              setData("type", "pay");
            }}
            className={classNames(form.type === "pay" && "selected")}
          >
            支出
          </Button>
          <Button
            onClick={() => {
              setData("type", "income");
            }}
            className={classNames(form.type === "income" && "selected")}
            shape="rounded"
          >
            收入
          </Button>
        </div>

        <div className="kaFormWrapper">
          <div className="kaForm">
            <div
              className="date"
              onClick={() => {
                setVisible(true);
              }}
            >
              <Icon type="calendar" className="icon" />
              <span className="text">
                {dayjs(form.date).format("YYYY-MM-DD")}
              </span>
              <DatePicker
                className="kaDate"
                title="记账日期"
                max={new Date()}
                visible={visible}
                onCancel={close}
                value={form.date}
                onConfirm={(val) => {
                  setData("date", val);
                }}
                onClose={close}
              />
            </div>

            <div className="kaInput">
              <Input
                className="input"
                placeholder="0.00"
                type="number"
                value={form.money}
                onChange={(val) => {
                  setKeepForm({ ...form, money: val });
                }}
              />
              <span className="iconYuan">¥</span>
            </div>
          </div>
        </div>
      </div>

      <div className="kaTypeList">
        {billListData[form.type].map((item) => {
          return (
            <div className="kaType" key={item.type}>
              <div className="title">{item.name}</div>
              <div className="list">
                {item.list.map((item) => {
                  return (
                    <div
                      className={classNames(
                        "item",
                        form.useFor === item.type ? "selected" : ""
                      )}
                      key={item.type}
                      onClick={() => {
                        setData("useFor", item.type);
                      }}
                    >
                      <div className="icon">
                        <Icon type={item.type} />
                      </div>
                      <div className="text">{item.name}</div>
                    </div>
                  );
                })}
              </div>
            </div>
          );
        })}
      </div>

      <div className="btns">
        <Button className="btn save" onClick={save}>
          保 存
        </Button>
      </div>
    </div>
  );
};
export default New;
